<template>
  <view class="ssp-help-goods" :style="{height}">
    <!-- 分类tabs -->
    <view class="ssp-tabs">
      <u-tabs
          :list="tabList"
          :current="tabCurrent"
          :height="56"
          :show-bar="false"
          :active-item-style="activeItemStyle"
          :itemStyle="itemStyle"
          active-color="#FFFFFF"
          font-size="28"
          :bold="false"
          :gutter="24"
          inactive-color="#969799"
          @change="_tabsChange"
      />
    </view>
    <!-- 分割线 -->
    <!-- 分割线 -->
    <!-- 分割线 -->
    <!-- 商品列表 -->
    <ScrollList
        v-if="goodsList.length"
        ref=scrollView
        minusHeight="48"
        :scrollAnimation="false"
        @interrupt="interrupt"
        @scrolltolower="scrolltolower"
    >
      <template slot="content">
        <GoodsWaterfall ref="waterfallRef" v-model="goodsList" type="2" @drawHS="_drawHS" />
      </template>
    </ScrollList>
    <!-- 骨架图 -->
    <goodsSkeleton v-if="loading" />
    <!-- 缺省状态 -->
    <DefaultPage v-else-if="!goodsList.length&&isEmpty" :minusHeight="48" :type="2" tips="暂时没有可帮卖商品哦～" />
    <!-- 帮卖成功海报 -->
    <OpenGroupSharing ref="shareChild" @shareSuccess="drawSuccess" />
  </view>
</template>

<script>
import ScrollList from '@/components/scrollList/index.vue'
import GoodsWaterfall from '@/components/goodsWaterfall/index.vue'
import DefaultPage from '@/components/defaultPage/index.vue'
import OpenGroupSharing from "@/components/shareImage/openGroupSharing.vue"
import goodsSkeleton from '@/components/goodsWaterfall/goodsSkeleton'
import goodsApi from '@/api/goods.js'
import Util from '@/api/util.js'

export default {
  name: 'helpGoods',
  props: {
    height: {
      type: String,
      default: '100%'
    }
  },
  components: {
    ScrollList,
    GoodsWaterfall,
    DefaultPage,
    OpenGroupSharing,
    goodsSkeleton
  },
  data() {
    return {
      tabList: [], // 分类tabs列表
      tabCurrent: 0, // 激活分类下标
      params: {
        currentPage: 1,
        pageSize: 10
      },
      goodsList: [],
      listMore: true, // 当前列表是否还有更多
      isEmpty: false, // 是否显示空状态--配合goodsList的长度使用，避免在页面一开始加载时先显示了空状态
      shareObj: {}, // 用于绘制成功海报之后广播给父组件的对象
      loading: true, // 骨架图
    }
  },
  computed: {
    // tabs中active样式
    activeItemStyle() {
      return {
        background: '#E44435',
        borderRadius: '44rpx'
      }
    },
    // tab item样式
    itemStyle() {
      return {
        background: '#F2F3F5',
        borderRadius: '44rpx',
        margin: '0 8rpx'
      }
    }
  },
  methods: {
    // 获取分类列表
    async getTabs() {
      const { data } = await goodsApi.getSHCategory()
      const categories = data || []
      categories.unshift({ name: '全部', id: -1 })
      this.tabList = categories
    },
    // 获取可帮卖商品列表
    getList() {
      const params = { ...this.params }
      if (this.tabCurrent !== 0) {
        const item = this.tabList[this.tabCurrent]
        params.categoryId = item.id
      }
      goodsApi.getGoodsSquare(params).then(res => {
        if (this.params.currentPage === 1) {
          this.goodsList = res.data.records
          this.isEmpty = true
          if (this.loading) {
            setTimeout(() => {
              this.loading = false
            }, 500)
          }
        } else {
          this.goodsList = this.goodsList.concat(res.data.records)
        }
        // 无更多标识
        if ((this.params.currentPage * this.params.pageSize) !== this.goodsList.length) {
          this.listMore = false
        }
      }).catch(err => {
        this.$refs.scrollView.loadFinish(3,0)
      })
    },
    // 重置数据列表
    _onResetList() {
      this.loading = true
      this.listMore = true
      this.params.currentPage = 1
      this.isEmpty = false
      this.$refs.waterfallRef && this.$refs.waterfallRef.clear()
      this.getList()
    },
    // 分类tabs改变触发
    _tabsChange(index) {
      this.tabCurrent = index
      this._onResetList()
      this.$refs.scrollView && this.$refs.scrollView.goToScroll(0)
    },
    interrupt() {
      this._onResetList()
      setTimeout(() => {
        this.$refs.scrollView && this.$refs.scrollView.refreshFinish() // 刷新完成
      }, 500)
    },
    scrolltolower() {
      ++this.params.currentPage
      this.getList()
      this.$refs.scrollView.loadFinish(this.listMore ? 0 : 3) // 加载完成，是否还有更多
    },
    // 帮卖海报绘制
    _drawHS(item) {
      goodsApi.updateShopWindow({
        spuId: item.spuId,
        superiorShopWindowId: item.shopWindowId,
        commissionRatioLv2: this.$store.state.userInfo.subordinateHelpSellCommissionRatio,
        isShopWindow: 0
      }).then(res => {
        if (res.code === 200) {
          // this.shareObj.spuId = item.spuId
          // this.shareObj.shopWindowId = item.shopWindowId // 橱窗id
          // this.shareObj.superiorAccountId = item.superiorAccountId // 上级用户id
          uni.showToast({
            icon: 'none',
            title: '正在帮卖',
          })
          const canvasData = {
            isGoods: true,
            userAvatar: this.$store.state.userInfo.communityLogo || this.$store.state.userInfo.avatar,// 团长头像
            userNickname: this.$store.state.userInfo.communityName || this.$store.state.userInfo.nickname,// 名字
            bgImgUrl: item.image,// 背景图片
            btnText: '跟团购买',
            salePrice: item.minSalePrice,
            type: 1, // 0动态 1开团成功,团购成功 2帮卖
            followGroupNumber: item.saleCount > 0 ? Util.playvolume(item.saleCount) + '人跟团中' : '一大波人赶来中'
          }
          // 海报参数
          this.shareObj = {
            communityLogo: canvasData.userAvatar,
            communityName: canvasData.userNickname,
            isGoods: true, // 是否是商品
            title: item.goodsName,
            shopWindowId: res.data,
            page: 'pagesB/goods/goodsDetails',
            isShareType: 1,
            thumbnail: item.image,
            minSalePrice: item.minSalePrice,
            maxSalePrice: item.maxSalePrice,
            marketPrice: item.marketPrice,
            totalBuyCount: item.saleCount,
            options: {
              shopWindowId: res.data,
              shareType: true
            }
          }

          this.$nextTick(() => {
            this.$refs.shareChild.shareFrends(canvasData)
            setTimeout(() => {
              item.isSelected = 1
            }, 500)
          })
        }
      })
    },
    // 帮卖海报绘制成功回调函数
    drawSuccess(res) {
      if (res.code == 200) {
        this.$emit('success', { ...this.shareObj, url: res.url,type: 4 })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.ssp-help-goods {
  position: relative;
  width: 100%;
  .ssp-tabs {
    padding: 18rpx 0 14rpx 24rpx;
    background-color: #ffffff;
  }
}
</style>
